<template>
  <div class="custom-tab-page">
    <div class="tab3-title">
      <div class="left">
        <span>商机总数：</span>
        <span>{{ total }}</span>
        <!-- <span style="margin-left: 15px;">订单总额：</span>
                <span>3423</span> -->
      </div>
      <el-button size="small" class="right" type="primary" @click="addFun" v-if="showItem">
        <el-icon>
          <IEpPlus />
        </el-icon>
        添加</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%; margin-top: 15px">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="oppo_name" label="商机名称" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="detailFun(row)" link>
            {{ row.oppo_name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="business_nature" label="商机性质" width="150" />
      <el-table-column prop="business_budget" label="预算金额(元)" width="130" />
      <el-table-column prop="bidding_time" label="招标时间" width="170" />
      <el-table-column prop="possibility" label="把握度" />
      <el-table-column prop="project_stage" label="商机进度" width="200" />
      <el-table-column prop="owner_name" label="销售" width="200" />
      <el-table-column prop="last_time" label="最后跟进时间" width="170" />
      <el-table-column width="110" label="操作" v-if="showItem" align="center" fixed="right">
        <template #default="{ row }">
          <!-- <el-button type="success" @click="detailFun(row)" link>
            查看
          </el-button> -->
          <el-button type="primary" @click="openUpdate(row)" link>
            编辑
          </el-button>
          <el-button type="danger" link @click="delFun(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: center; margin-top: 10px">
      <el-pagination :small="true" v-model:currentPage="currentPage" v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]" layout="total, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <addPage @refreshList="refreshList" :dataInfo="dataInfo" ref="addPageRef" />
  <detailPage ref="detailPageRef" @refreshList="refreshList" />
</template>
<script setup>
import { listApi, delApi } from "@/plugins/api/customer/manage/opportunity";
import addPage from "./tabDialog/Tab9-dialog.vue";
import detailPage from "./tabDialog/Tab9-detail.vue";
import { useRouter } from "vue-router";
let router = useRouter();
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
  showItem: {
    type: Boolean,
    default: false,
  },
});
let tableData = ref([]);

// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
function getData() {
  return new Promise((resolve, reject) => {
    listApi({
      page: currentPage.value,
      pageSize: pageSize.value,
      customer_id: props.dataInfo.id,
    }).then((res) => {
      tableData.value = res.list;
      total.value = res.page.total;
      resolve(res);
    });
  });
}
function refreshList() {
  getData();
}
// 增加
let addPageRef = ref(null);
function addFun() {
  addPageRef.value.initFun("add");
}
// 编辑
function openUpdate(row) {
  addPageRef.value.initFun("update", row);
}
// 查看
let detailPageRef = ref(null);
function detailFun(row) {
  detailPageRef.value.initFun(row);
  //   router.push({
  //     path: "/custom/opportunity/detail",
  //     query: {
  //       oppoInfo: JSON.stringify(row),
  //     },
  //   });
}

// 删除
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function initFun() {
  getData();
}
defineExpose({
  initFun,
});
//
onMounted(() => { });
</script>

<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;

  .tab3-title {
    display: flex;
    justify-content: space-between;
    height: 46px;
    background: #fafbfc;
    box-sizing: border-box;
    padding-right: 10px;

    .left {
      align-self: center;
      font-size: 14px;
      font-weight: bold;
      color: #172b4d;
      position: relative;
      padding-left: 7px;

      &::before {
        content: "";
        width: 2px;
        height: 15px;
        background: #005ecc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .right {
      align-self: center;
    }
  }
}
</style>
